<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>opacity</title>
    <style type="text/css">
      .demo-box {
        height: 100vh;
        width: 100vw;
        counter-reset: css-demo-title;
      }
      .demo-box dl {
        display: inline-block;
        width: 200px;
        height: 200px;
        border: 1px dashed red;
        padding: 10px;
        counter-increment: css-demo-title;

        overflow: hidden;
      }
      .demo-box dt {
        font-weight: 700;
        margin-bottom: 5px;
        line-height: 28px;
        text-decoration: underline black;
        text-underline-offset: 4px;
      }
      .demo-box dt::before {
        content: counter(css-demo-title) '、';
        display: inline;
      }
      .demo-box dd {
        height: calc(100% - 28px - 5px);
        margin: 0;
      }
      .demo-box dd > * {
        height: 100%;
        width: 100%;
      }
      /* 书写区 */

      .demo1 {
        color: white;
        opacity: 0.5;
        background: red;
      }
      .demo1 div {
        color: white;
        opacity: 0.5;
        background: red;
      }
      .demo2 {
        background: red;
        transition: 0.5s opacity;
      }
      .demo2:hover {
        opacity: 0.1;
      }
    </style>
  </head>
  <body>
    <a href="./8-background增强.html">上一篇</a>
    <a href="./10-box-shadow.html">下一篇</a>
    <br />
    <div class="demo-box">
      <dl>
        <dt>父子间透明度乘算</dt>
        <dd>
          <div class="demo1">
            我是0.5
            <div>我也是0.5</div>
          </div>
        </dd>
      </dl>
      <dl>
        <dt>动画效率最高的属性</dt>
        <dd>
          <div class="demo2"></div>
        </dd>
      </dl>
      <dl>
        <dt>参与计算，利用边界效应当成if else来用</dt>
        <dd>
          暂无
        </dd>
      </dl>
    </div>
  </body>
</html>
